.insights-icon {
  inline-size: auto;
  block-size: 1.25rem;
  flex-basis: 22px;
  margin-inline-end: 0.5rem;
  justify-self: center;

  /* JavaScript-set numbers; default to 0 */
  --critical: 0;
  --important: 0;
  --moderate: 0;
  --low: 0;
  /*  Add the numbers together, making calculations easier later on */
  --total: calc(var(--critical) + var(--important) + var(--moderate) + var(--low));
  border-radius: 3px;
  border: 1px solid var(--pf-t--global--border--color--default);
  /*  Use flex here (with auto below) so everything always adds up properly */
  display: flex;
  flex-direction: column;
  inline-size: 22px;
  block-size: 22px;
  /*  Inner gap between colors and border */
  padding: 1px;
  /* The top border offset is provided by the border of the first block */
  padding-block-start: 0;

  > * {
    /*  If there's a value, set to 1px. Otherwise, divide by 0 and it becomes invalid */
    --pixel-onoff: calc(var(--severity) / var(--severity) * 1px);
    /*  Hit severity is mapped to the --servity variable in blocks below. */
    block-size: calc(var(--severity) / var(--total) * 100%);
    /*  Make it stretchy so the math always works out. ("Fudge factor") */
    flex: auto;
    /*  Anti-alias the edges ever-so-slightly */
    border-radius: 1px;
    /* If there's a value, then there's a gap at top */
    margin-block-start: var(--pixel-onoff);
    /* If there's a value, always round height up to 1px minimum */
    min-block-size: var(--pixel-onoff);
  }

  &-critical {
    --severity: var(--critical);
    background: #c9190b;
  }

  &-important {
    --severity: var(--important);
    background: #ec7a08;
  }

  &-moderate {
    --severity: var(--moderate);
    background: #f0ab00;
  }

  &-low {
    --severity: var(--low);
    background: #d2d2d2;
  }
}
